<template>
	<view class="index-ov">
		<!-- 本地没有存触发引导添加到我的小程序 -->
		<view class="frist-notic" v-if="is_frist">
			点击"●●●"添加到我的小程序
		</view>
		<!-- 顶部图片 -->
		<view class="index-img" v-if="wxSet.index_bg != ''">
			<image class="fengrui-img" :src="wxSet.index_bg" mode="aspectFill"></image>
			<view class="radial-gradient-bg"></view>
		</view>

		<view class="menu_scroll_top_img_ac">
			<!-- / 分类菜单 -->
			<view :class=" scrollTopHightX < 6 ? 'menu_scroll_top_one':'menu_scroll_top_tow'">
				<view class="menu-logo">
					<image class="fengrui-img" :src="wxSet.fr_logo" mode="aspectFit"></image>
				</view>
				<block v-if="menusLsit != ''">
					<view class="menu-scroll">
						<scroll-view class="menu-scroll-leat" scroll-x="true">
							<view :class="active == index ? 'active_menu_scroll_leat_font':'menu_scroll_leat_font' "
								v-for="(menu,index) in menusLsit" :key="index" @tap="menuTap(index)">
								{{ menu.name }}
							</view>
						</scroll-view>
					</view>
				</block>
			</view>
		</view>

		<block v-if="active == 0">
			<!-- S 轮播图组件 -->
			<rotation-swiper :rotation="rotation" :shuffling_style="wxSet.index_shuffling_style"></rotation-swiper>
			<!-- E 轮播图组件 -->
			
			<!-- S 标签 -->
			<view class="label-felx" v-if="wxSet.index_tag != ''">
				<view class="label-list" v-for="(item ,idex) in tags" :key="index" @tap="tagsTap(item.id)">
					<text style="color:#ff6f6f;">#</text> {{item.name}}
				</view>
			</view>
			<!-- S 标签 -->

			<!-- S 搜索框 -->
			<view class="search-view">
				<view class="search-inpt-view">
					<input name="place" class="search-input" type="text" placeholder="搜索一下！" placeholder-style=""
						v-model="searchValue" />
					<view class="search-btn" @tap="searchBlur()">搜索</view>
				</view>
			</view>
			<!-- E 搜索框 -->

			<!-- S 导航区域 -->
			<view class="Vajra-bg" v-if="vajra.length != 0  && wxSet.is_district != 1">
				<view class="Vajra">
					<block v-for="(valist,index) in vajra" :key="index">
						<!-- / 渲染普通金刚区 -->
						<view class="Vajra-list" v-if="valist.type != 'xs_program'" @tap="xs_default(valist)">
							<view class="Vajra-list-img">
								<image class="fengrui-img" :src="valist.himg" mode="aspectFit"></image>
							</view>
							<view class="Vajra-list-font">
								{{ valist.title }}
							</view>
						</view>

						<!-- / 渲染跳转小程序 -->
						<view class="Vajra-list" v-if="valist.type == 'xs_program'">
							<navigator :path="valist.url" hover-class="none" open-type="navigate" :app-id="valist.appid"
								target="miniProgram">
								<view class="Vajra-list-img">
									<image class="fengrui-img" :src="valist.himg" mode="aspectFit"></image>
								</view>
								<view class="Vajra-list-font">
									{{ valist.title }}
								</view>
							</navigator>
						</view>
					</block>
				</view>
			</view>
			<!-- E 导航区域 -->

			<!-- S 首页公告 -->
			<view class="notice" v-if="wxSet.fr_notice != ''">
				<view class="notice-icon">
					<image class="fengrui-img" src="../../static/index/notice.svg" mode="aspectFill"></image>
				</view>
				<view class="notice-text">
					<view class="noticl-item">{{wxSet.fr_notice}}</view>
				</view>
			</view>
			<!-- E 首页公告 -->

			<!-- S 热门文章 -->
			<view v-if="focuList != ''">
				<view class="titel-vi" hover-class="fengrui-li-hover">
					<view class="titel-vi-q">
						<view class="titel-vi-img">
							<image class="fengrui-img" src="../../static/index/title-img.svg" mode="aspectFill"></image>
						</view>
						<view class="titel-vi-font">热门文章</view>
					</view>
				</view>

				<view class="swiper-list">
					<scroll-view class="" scroll-x="true" show-scrollbar="false">
						<view class="scroll-view-item-list" hover-class="fengrui-li-hover"
							v-for="(wxlist,index) in focuList" :key="index" @tap="xs_default(wxlist)">
							<view class="scroll-view-item-h">
								<view class="scroll-view-item-h-img">
									<image class="fengrui-img" :src="wxlist.himg" mode="widthFix"></image>
								</view>
							</view>
							<view class="scroll-view-item-h-title">
								{{ wxlist.title }}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- E 公众号文章 -->

			<!-- 焦点标题 -->
			<view class="titel-vi">
				<view class="titel-vi-q">
					<view class="titel-vi-img">
						<image class="fengrui-img" src="../../static/index/title-img2.svg" mode="aspectFill"></image>
					</view>
					<view class="titel-vi-font">最新文章</view>
				</view>
			</view>
		</block>

		<!-- 文章列表 -->
		<common-list :newPost="newPost" :type="index_style" :wx_video="wxSet.wx_video"></common-list>

		<!-- 全屏加载 -->
		<cover-bulr-bg v-if="coverBulr"></cover-bulr-bg>

		<!-- loading加载图 -->
		<block v-if="page > 1">
			<loading-lis :listsLoading="listsLoading"></loading-lis>
		</block>
		<!-- 占位符 -->
		<view style="height: 100rpx;"> </view>
	</view>
</template>

<script>
	// 获取应用实例
	const app = getApp()
	import * as API from "../../utils/api";
	let interstitialAd = null;
	export default {
		data() {
			return {
				// 引导添加我的小程序
				is_frist: true,
				index: 0,
				// 状态栏高度
				statusBarHeight: '',
				//滚动高度
				scrollTopHightX: '',
				// 基本配置
				wxSet: [],
				index_style: 1, //首页样式
				launchScene: 0, //微信小程序场景值
				// 全屏加载
				coverBulr: true,
				// loading
				listsLoading: true,


				// 首页分类
				menusLsit: [],
				//首页菜单
				active: 0,
				page: 1,
				// 导航区域
				vajra: [],
				searchValue: "", //搜索内容

				// 焦点
				focuList: [],
				newPost: [],
				tags: [], //首页标签

			}
		},
		onLoad() {
			if (app.globalData.wxSet == '') {
				//（解决异步）
				app.on('wxSet', this.changeToken.bind(this));
			} else {
				this.wxSet = app.globalData.wxSet;
				this.statusBarHeight = app.globalData.statusBarHeight;
				this.launchScene = app.globalData.launchScene; //微信小程序场景值

				// 获取随机样式
				if (this.wxSet.index_style == 4) {
					var style = Math.floor(Math.random() * 3) + 1;
					this.index_style = style;
				} else {
					this.index_style = this.wxSet.index_style
				}

				// 轮播数据获取
				this.lunbo();
				// 引导添加到我的小程序
				this.fristNotice();
			}

			// 微信分享盆友圈
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		// 监听滑动
		onPageScroll(e) {
			// 判断型号 显示不同标题栏高度
			this.scrollTopHightX = e.scrollTop;
		},
		// 分享好友配置
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				// console.log(res.target)
			}
			return {
				title: this.wxSet.share_title,
				imageUrl: this.wxSet.share_title_url,
				path: '/pages/index/index'
			}
		},
		// 监听触底----上啦刷新
		onReachBottom() {
			this.page = this.page + 1;
			this.lists();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.newPost = [];
			app.getSetDate();
			// this.changeToken();
			setTimeout(function() { //关闭加载
				uni.stopPullDownRefresh();
			}, 800);
			uni.showToast({
				title: '加载中...',
				icon: 'loading',
				duration: 800
			})
		},
		methods: {
			//（解决异步）
			changeToken() {
				this.wxSet = app.globalData.wxSet;
				this.statusBarHeight = app.globalData.statusBarHeight;
				this.launchScene = app.globalData.launchScene; //微信小程序场景值

				// 获取随机样式
				if (this.wxSet.index_style == 4) {
					var style = Math.floor(Math.random() * 3) + 1;
					this.index_style = style;
				} else {
					this.index_style = this.wxSet.index_style
				}

				// 轮播数据获取
				this.lunbo();
				// 引导添加到我的小程序
				this.fristNotice();
			},

			// 轮播图获取
			lunbo() {
				if (this.wxSet.index_shuffling != '') {
					API.getLunbo([this.wxSet.index_shuffling]).then((res) => {
						this.rotation = res.data;
						// console.log('首页轮播图',res.data)
					})
				}
				// 焦点
				if (this.wxSet.index_jiaodian != '0' && this.wxSet.focu[0] != '') {
					var focuList = [];
					for (var i = 0; i < this.wxSet.focu.length; i++) {
						const json = JSON.parse(this.wxSet.focu[i]);
						focuList.push(json)
					}
					this.focuList = focuList;
					// console.log(this.focuList)
				}


				this.listPosts(); // 获取顶部分类
				this.getTagsInclude(); //首页标签
			},
			// 菜单点击
			menuTap(index) {
				var tapIndex = index;
				this.active = tapIndex;
				this.page = 1;
				this.newPost = [];
				this.lists();

				uni.showLoading({
					title: '加载中'
				});
			},
			// 获取顶部分类
			listPosts() {
				if (this.wxSet.index_top != '') {
					// 获取顶部分类
					API.getCategIndex([this.wxSet.index_top]).then((res) => {
						this.menusLsit = res.data;
						var jlis = this.menusLsit.unshift({
							name: '最新文章'
						})
						// console.log('获取顶部分类',res.data)
					})
				}

				// 金刚区
				if (this.wxSet.district[0] != '') {
					this.getDstrict();
				}

				// 请求文章列表
				this.lists();
			},
			// 首页标签
			getTagsInclude() {
				if (this.wxSet.index_tag != '') {
					// 首页标签
					API.getTagsInclude([this.wxSet.index_tag]).then((res) => {
						// console.log('首页标签',res.data)
						this.tags = res.data;
					})
				}
			},
			// 请求文章列表
			lists() {
				if (this.wxSet.categ_filter == '') { // 判断是否有塞选文章
					var filter = 0;
				} else {
					var filter = this.wxSet.categ_filter;
				}

				if (this.active == 0) { // 请求文章列表
					API.getList([this.page], [filter]).then((res) => {
						if (!res.data.length) {
							this.listsLoading = false;
						} else {
							this.newPost = this.newPost.concat(res.data);
						}
						// console.log('最新文章列表', res.data)
					})
				} else {
					API.getCategoList([this.menusLsit[this.active].id], [this.page]).then((res) => {
						if (!res.data.length) {
							this.listsLoading = false;
						} else {
							this.newPost = this.newPost.concat(res.data);
						}
						// console.log('首页分类文章', res.data)
					})

				}

				setTimeout(function() {
					uni.hideLoading();
				}, 800);
			},
			
			// 搜索按钮跳转
			searchBlur() {
				if (this.searchValue == '') {
					uni.showToast({
						icon: "error",
						title: '请输入搜索内容...',
					})
				} else {
					uni.navigateTo({
						url: '../list/list?keyword=' + this.searchValue
					})
				}
			},
			// 金刚区 wxSet中district数组重新解析打包成json格式,返回新数组
			getDstrict() {
				var vajra = [];
				for (var i = 0; i < this.wxSet.district.length; i++) {
					const json = JSON.parse(this.wxSet.district[i]);
					vajra.push(json)
				}
				this.vajra = vajra;
				// console.log('金刚区',this.vajra)
			},

			// 引导添加到我的小程序å
			fristNotice() {
				setTimeout(() => {
					this.coverBulr = false;
					// 紧急公告弹窗
					if (this.wxSet.fr_sos_notice != '') {
						if (this.wxSet.fr_sos_notice_url == '') {
							uni.showModal({
								title: '特别说明',
								content: this.wxSet.fr_sos_notice,
							});
						} else {
							uni.showModal({
								title: '特别说明',
								confirmText: '访问',
								content: this.wxSet.fr_sos_notice,
								success: (res) => {
									if (res.confirm) {
										this.popNoticeUrl();
									}
								}
							});
						}
					}

					if (this.wxSet.wx_chaping != '' && this.launchScene != 1154) {
						// 加载插屏弹窗
						this.getWxchaAd();
					}
				}, 600)

				setTimeout(() => {
					this.is_frist = false;
				}, 7000)
			},


			// 滑动区域点击
			scrlistTap(e, z) {
				if (z == 'url') {
					uni.navigateTo({
						url: '../weblist/weblist?aurl=' + e
					})
				} else if (z == 'post') {
					uni.navigateTo({
						url: '../weblist/weblist?aurl=' + e
					})
				}

			},

			// 金刚区跳转
			xs_default(item) {
				switch (item.type) {
					case 'xs_default':
						uni.navigateTo({
							url: item.route
						})
						break;
					case 'xs_tap':
						uni.switchTab({
							url: item.route
						})
						break;
					case 'xs_bilibli':
						// 该逻辑来自:https://segmentfault.com/a/1190000040857244?utm_source=sf-similar-article
						const aid = item.appid
						const timestamp = new Date().getTime()
						const path =
							`pages/video/video?__preload_=${timestamp*10+3}&__key_=${timestamp*10+4}&avid=${aid}`
						wx.navigateToMiniProgram({
							appId: 'wx7564fd5313d24844',
							path,
							success: res => {
								console.log('跳转成功')
							}
						})
						break;
					case 'xs_business':
						var aurl = item.route
						uni.navigateTo({
							url: '../weblist/weblist?aurl=' + aurl
						})
						break;
					case 'xs_wxvideo_activity':
						uni.openChannelsActivity({
							finderUserName: item.appid,
							feedId: item.route,
							success: (res) => {}
						})
						break;
					case 'xs_wxvideo_home':
						uni.openChannelsUserProfile({
							finderUserName: item.appid,
						})
						break;
				}
			},

			// 插屏广告数据
			getWxchaAd() {
				// 在页面onLoad回调事件中创建插屏广告实例
				if (wx.createInterstitialAd) {
					interstitialAd = wx.createInterstitialAd({
						adUnitId: this.wxSet.wx_chaping
					})
					interstitialAd.onLoad(() => {})
					interstitialAd.onError((err) => {})
					interstitialAd.onClose(() => {})
				}

				// 在适合的场景显示插屏广告
				if (interstitialAd) {
					interstitialAd.show().catch((err) => {
						console.error(err)
					})
				}
			},

			// 首页标签
			tagsTap(e) {
				uni.navigateTo({
					url: '../list/list?jstag=' + e
				})
			},

			// 弹窗通知点击
			popNoticeUrl() {
				if (this.wxSet.fr_sos_notice_url.substr(0, 5) == 'https') {
					wx.navigateTo({
						url: '../weblist/weblist?aurl=' + this.wxSet.fr_sos_notice_url,
					})
				} else {
					wx.navigateTo({
						url: this.wxSet.fr_sos_notice_url,
					})
				}
			},
		}
	}
</script>

<style>
	/* 搜索 */
	.search-view {
		position: relative;
		margin: 0rpx 40rpx;
		border-radius: 200rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		border: 4rpx #4b75ff solid;
		/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); */
	}

	.search-btn {
		position: absolute;
		right: 2%;
		height: 80rpx;
		background-color: #4b75ff;
		bottom: 10rpx;
		width: 22%;
		font-size: 28rpx;
		border-radius: 40rpx;
		color: #fff;
		line-height: 80rpx;
		text-align: center;
		box-shadow: 0 4px 8px rgba(75, 117, 255, 0.2);
		transition: all 0.3s ease;
	}

	.search-btn:active {
		transform: scale(0.98);
		/* box-shadow: 0 2px 4px rgba(75, 117, 255, 0.2); */
	}

	.search-input {
		height: 100rpx;
		width: 65%;
		padding: 0 60rpx;
		z-index: 99999;
		/* color: #161616; */
	}

	.search-inpt-view {
		background-color: #FFFFFF;
		border-radius: 200rpx;
		height: 100rpx;
	}

	.container-search {
		margin: 40rpx 0rpx;
	}


	/* 加载动图 */
	.artileload {
		height: 80rpx;
		width: 80rpx;
		margin: 20rpx auto;
		overflow: hidden;
	}

	/* 首页分类样式1 */
	.swiper-tow-list-one {
		margin: 30rpx;
	}

	.swiper-tow-view {
		border: 20rpx 20rpx 0rpx 0rpx;
		overflow: hidden;
		padding-bottom: 30rpx;
	}

	.swiper-tow-list {
		overflow: hidden;
		border-radius: 40rpx;
	}



	/* 公告 */
	.notice {
		margin: 28rpx;
		padding: 26rpx 46rpx;
		border-radius: 40rpx;
		background-color: #fff4e0;
		display: flex;
		align-items: center;
	}

	.notice-icon {
		width: 48rpx;
		height: 48rpx;
		flex-shrink: 0;
	}

	.notice-text {
		font-size: 30rpx;
		margin-left: 20rpx;
		width: 100%;
		height: 60rpx;
		overflow: hidden;
		position: relative;

	}

	.noticl-item {
		position: absolute;
		width: 100%;
		height: 100%;
		line-height: 60rpx;
		text-align: right;
		animation: notice-text 10s linear infinite;
		white-space: nowrap;
		color: #fec009;
	}

	@keyframes notice-text {
		0% {
			transform: translateX(100%);
		}

		100% {
			transform: translateX(-100%);
		}
	}

	/* 引导添加我的小程序 */
	.index-img {
		width: 100%;
		height: 720rpx;
		position: absolute;
		z-index: -1;
	}

	.frist-notic {
		background-color: #1f2021;
		position: fixed;
		top: 90rpx;
		right: 26%;
		width: 340rpx;
		padding: 16rpx;
		z-index: 99;
		border-radius: 200rpx;
		color: #faffff;
		text-align: center;
		font-size: 20rpx;
	}

	/* 列表没有数据 */
	.no-list-data {
		text-align: center;
		margin: 30rpx 0px;
		color: #e6e6e6;
		font-size: 24rpx;
	}

	/* 区域滑动 */
	.scroll-view-item-describe {
		color: #ADADAD;
		font-size: 24rpx;
		margin: 6rpx 30rpx 0rpx 30rpx;
		overflow: hidden;
	}

	.scroll-img {
		height: 30rpx;
		width: 30rpx;
	}

	.scroll-view-item-h-title {
		font-size: 26rpx;
		margin: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: break-spaces;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 1.4;
		font-weight: 500;
		height: 74rpx;
	}

	.scroll-view-item-h-describe {
		font-size: 22rpx;
		color: #807C7C;
		margin-left: 18rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-top: 12rpx;
		margin-bottom: 18rpx;
	}

	.scroll-view-item-h-img {
		width: 100%;
		height: 200rpx;
		overflow: hidden;
		position: relative;
	}

	.scroll-view-item-h-img::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.1) 100%);
		z-index: 1;
	}

	.scroll-view-item-list-star {
		width: 0rpx;
		border-radius: 40rpx;
		margin-right: 10rpx;
		margin-left: 20rpx;
		display: inline-block;
		overflow: hidden;
	}

	.scroll-view-item-list {
		width: 380rpx;
		border-radius: 40rpx;
		display: inline-block;
		overflow: hidden;
		background-color: #FFFFFF;
		margin-left: 30rpx;
		/* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08); */
		transform: scale(0.98) translateY(0);
		transition: all 0.3s ease;
	}

	.scroll-view-item-list:hover {
		transform: scale(1) translateY(-5rpx);
		/* box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); */
	}

	.scroll-view-item-list:last-child {
		margin-right: 30rpx;
	}


	.swiper-list {
		white-space: nowrap;
		width: 100%;
		overflow: visible;
		padding: 10rpx 0;
	}

	/* 标题 */
	.titel-vi-right {
		color: #4b75ff;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.titel-vi-font {
		font-size: 32rpx;
		margin-left: 24rpx;
		font-weight: 600;
	}

	.titel-vi-img {
		width: 40rpx;
		height: 40rpx;
	}

	.titel-vi {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 40rpx 30rpx 20rpx 30rpx;
	}

	.titel-vi-q {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	/* 顶部菜单 */
	.menu_scroll_top_one {
		position: fixed;
		top: -1rpx;
		left: 0;
		width: 100%;
		z-index: 90;
		/* padding-top: calc(var(--status-bar-height) + 46px); */
		padding-top: 46px;
		/* #ifdef MP-TOUTIAO */
		padding-top: unset;
		/* #endif */
	}

	.menu_scroll_top_img_ac {
		height: 260rpx;
	}


	.menu_scroll_top_tow {
		position: fixed;
		top: -1rpx;
		left: 0;
		background-color: #ffffff;
		width: 100%;
		z-index: 9999;
		/* padding-top: calc(var(--status-bar-height) + 46px); */
		padding-top: 46px;
		border-radius: 0rpx 0rpx 40rpx 40rpx;
		box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.10);

		/* #ifdef MP-TOUTIAO */
		padding-top: unset;
		height: 120rpx;
		/* #endif */
	}

	.menu_list_img_ti {
		height: 30rpx;
		width: 30rpx;
		margin-right: 10rpx;
		float: left;
		overflow: hidden;
	}

	.active_menu_list_img_ti {
		height: 40rpx;
		width: 40rpx;
		margin-right: 10rpx;
		float: left;
	}

	.active_menu_scroll_leat_font {
		font-size: 26rpx;
		padding: 16rpx 30rpx;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		width: auto;
		display: inline-block;
		background-color: #4b75ff;
		border-radius: 40rpx;
		color: #FFFFFF;
		margin-right: 20rpx;
		animation: clickAnimation 1s ease forwards;
	}

	@keyframes clickAnimation {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	.menu_scroll_leat_font {
		color: #525252 !important;
		font-size: 26rpx;
		padding: 16rpx 30rpx;
		justify-content: center;
		align-items: center;
		filter: grayscale(1);
		flex-shrink: 0;
		width: auto;
		display: inline-block;
		margin-right: 20rpx;
		border-radius: 40rpx;
		background-color: rgba(255, 255, 255, 0.6);
		transition: all 0.3s ease;
	}

	.menu_scroll_leat_font:hover {
		background-color: rgba(255, 255, 255, 0.8);
		transform: translateY(-2rpx);
	}

	.menu-scroll-right {
		width: 30rpx;
		height: 6rpx;
	}

	.menu-scroll-leat {
		align-items: flex-end;
		white-space: nowrap;
		/* background-color: rgba(255, 255, 255, 0.4); */
		border-radius: 40rpx;
		padding: 20rpx 0;
	}

	.menu-scroll {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 30rpx 30rpx 30rpx;
		justify-content: flex-start;
	}

	.menu-logo {
		height: 70rpx;
		width: 150rpx;
		margin-left: 30rpx;
	}

	/* 金刚区域 */
	.Vajra-list-font {
		color: #807C7C;
		font-size: 24rpx;
	}

	.Vajra-list-img {
		height: 90rpx;
		width: 90rpx;
		overflow: hidden;
		margin: auto;
	}

	.Vajra-list {
		text-align: center;
		width: 25%;
		margin-bottom: 20rpx;
		flex-shrink: 0;
	}

	.Vajra {
		margin: 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}

	.Vajra-bg {
		background-color: #FFFFFF;
		border-radius: 40rpx;
		margin: 20rpx 30rpx 30rpx 30rpx;
		padding: 1rpx;
	}


	

	/* .image {
		width: 750rpx;
	} */

	.radial-gradient-bg {
		position: absolute;
		left: 0;
		bottom: -10rpx;
		width: 100%;
		height: 100rpx;
		background: linear-gradient(180deg, rgba(248, 248, 248, 0) 0%, rgba(248, 248, 248, 0.31) 18%, rgba(248, 248, 248, 0.93) 64%, #F8F8F8 86%);
	}


	/* 标签 */
	.label-felx {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 30rpx 30rpx 40rpx 30rpx;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.label-list {
		background-color: #f5f7ff;
		color: #4b75ff;
		border-radius: 30rpx;
		padding: 12rpx 30rpx;
		text-align: center;
		font-size: 26rpx;
		font-weight: 500;
		transition: all 0.3s ease;
		border: 1px solid rgba(75, 117, 255, 0.1);
		box-shadow: 0 2px 8px rgba(75, 117, 255, 0.05);
	}

	.label-list:hover {
		background-color: #4b75ff;
		color: #FFFFFF;
		transform: translateY(-2rpx);
		box-shadow: 0 4px 12px rgba(75, 117, 255, 0.15);
	}

	.label-list text {
		color: #4b75ff;
		font-weight: bold;
	}

	.label-list:hover text {
		color: #FFFFFF;
	}

	/* 全局 */
	.content-all {
		margin: 30rpx 30rpx 30rpx 30rpx;
		z-index: 30;
	}

	.fengrui-img {
		width: 100%;
		height: 100%;
	}


	.index-ov {
		overflow-x: hidden;
	}

	.tar-w {
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99999999999;
	}

	page {
		background-color: #F7F7F7;
		overflow-x: hidden;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	/* 暗黑模式下应用的样式 */
	@media (prefers-color-scheme: dark) {

		page,
		.menu_scroll_top,
		.search-view,
		.search-inpt-view {
			background: #161616;
		}

		.radial-gradient-bg {
			background: linear-gradient(180deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 0.31) 18%, rgba(22, 22, 22, 0.93) 64%, #161616 86%);
		}

		.scroll-view-item-list {
			border: 1px #191919 solid;
			background: #202020;
			box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
		}

		.menu_scroll_top_tow,
		.menu-scroll-list,
		.label-list,
		.swiper-item-two,
		.Vajra-bg {
			background: #202020;
		}

		.list-one-w,
		.uni-searchbar__box {
			border: 1px #191919 solid;
			background: #202020;
		}

		.poster {
			border-top: #000000 1px solid;
		}

		.titel-vi-font {
			color: #e0e0e0;
		}

		.menu_scroll_leat_font {
			background-color: rgba(255, 255, 255, 0.9);
		}

		.scroll-view-item-h-title {
			color: #b0b0b0;
		}

		.label-list {
			background-color: #252525;
			border: 1px solid rgba(75, 117, 255, 0.2);
		}

		.label-list:hover {
			background-color: #4b75ff;
		}

		.search-view {
			background-color: #252525;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		}

		.search-inpt-view {
			background-color: #252525;
		}
	}
</style>